<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统中心</el-breadcrumb-item>
      <el-breadcrumb-item>联系人管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <el-form :model="searchForm" class="demo-form-inline" >
        <el-row :gutter="20">
          <el-form-item>
            <el-col :span="4">
              <el-input placeholder="姓名" v-model="searchForm.name"></el-input>
            </el-col>
            <el-col :span="4">
              <el-input placeholder="职位" v-model="searchForm.position"></el-input>
            </el-col>
            <el-col :span="4">
              <el-input placeholder="电话号" v-model="searchForm.tel"></el-input>
            </el-col>
            <el-button @click="searchMan" plain type="info">搜索</el-button>
            <el-button @click="toAddMan" type="primary">添加联系人</el-button>
            <el-button @click="importExcelVisible=true" type="primary">导入</el-button>
            <el-button @click="exportExcel()" type="primary">导出</el-button>
          </el-form-item>
        </el-row>
      </el-form>

      <el-table
        :data="ManList"
        stripe
        style="width: 100%">


        <el-table-column
          label="姓名"
          prop="name"
          width="130">
        </el-table-column>
        <el-table-column
          label="电话"
          prop="tel"
          width="130">
        </el-table-column>
        <el-table-column
          label="性别">
          <template slot-scope="scope">
            {{scope.row.sex | sexFit}}
          </template>
        </el-table-column>
        <el-table-column
          label="邮箱"
          prop="email">
        </el-table-column>
        <el-table-column
          label="收件地址"
          prop="recvAddress" width="130">
        </el-table-column>
        <el-table-column
          label="职位"
          prop="position" width="120">
        </el-table-column>
        <el-table-column
          label="描述"
          prop="remarks" width="160">
        </el-table-column>
        <el-table-column
          label="客户id"
          prop="customerId" width="100">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-button @click="toUpMan(scope.row.id)" type="primary">编辑
                </el-button>
                <el-button @click="delMan(scope.row.id)" type="primary">删除
                </el-button>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page.pagenum"
        :page-size="page.pagesize"
        :page-sizes="[5, 10, 20, 40]"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>

      <el-dialog :close-on-click-modal="false" title="导入用户信息" :visible.sync="importExcelVisible" width="25%">
        <el-upload
          class="upload-demo"
          drag
          :headers="auth"
          action="/api/linkMan/importExcel"
          on-success="uploadExcelsuccess"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">上传联系人的表格</div>
        </el-upload>
      </el-dialog>

    </el-card>

  </div>
</template>

<script>
    export default {
        name: "LinkMan",
      data(){
          return{
            searchForm:{},
            manFormVisible:false,
            ManList:[],
            page:{
              pagenum:0,
              pagesize:5
            },
            total:1,
            importExcelVisible:false,
            auth:{token:null}
          }
      },
      methods:{
        uploadExcelsuccess:function(res,file){
          this.searchMan();
        },
        searchMan:function(){
          this.$http.post("/linkMan/list/" + this.page.pagenum + "/" + this.page.pagesize, this.searchForm).then((res) => {
            this.ManList = res.data.result.list;
            this.total = res.data.result.total;
          });
        },
        handleSizeChange: function (val) {
          this.page.pagesize = val;
          this.searchMan();
        },
        handleCurrentChange: function (val) {
          this.page.pagenum = val;
          this.searchMan();
        },
        toAddMan:function () {
          this.$router.push("/addlinkMan");
        },
        delMan:function (id) {
          this.$http.post("/linkMan/delMan/"+id).then((res) => {
            if (res.data.success) {
              this.$message({
                message: res.data.message,
                type: 'success'
              });
            } else {
              this.$message.error(res.data.message);
            }
            this.searchMan();
          });
        },
        toUpMan:function (id) {
          this.$router.push({path:'/upMan?id='+id})
        },
        exportExcel:function () {
          location.href="http://localhost:8080/linkMan/exportExcel";
        }
      },
      mounted() {
        this.searchMan();
        this.auth.token=sessionStorage.getItem("token");
      },
      filters:{
        sexFit:function (val) {
          if(val==0){
            return "男"
          }
          if(val==1){
            return "女";
          }
        }
      }
    }
</script>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
